<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      size="default"
      status-icon
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
          <el-option label="男" value="male" />
          <el-option label="女" value="female" />
        </el-select>
      </el-form-item>
      <el-form-item label="生源省份" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择生源">
          <el-option label="上海" value="上海" />
          <el-option label="北京" value="北京" />
        </el-select>
      </el-form-item>
      <el-form-item label="高考年份" prop="yearOfCollegeEntrance">
        <el-select
          v-model="ruleForm.yearOfCollegeEntrance"
          placeholder="请选择高考年份"
        >
          <el-option
            v-for="i in 3"
            :label="getYearBeforeNow(i - 1)"
            :value="getYearBeforeNow(i - 1)"
            :key="i"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所在中学" prop="middleSchool">
        <el-input v-model="ruleForm.middleSchool" />
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="ruleForm.phoneNumber" />
      </el-form-item>
      <el-form-item label="报备人" prop="reporter">
        <el-input v-model="ruleForm.reporter" />
      </el-form-item>
      <el-form-item label="报备人所在部门" prop="department">
        <el-input v-model="ruleForm.department" />
      </el-form-item>
      <el-form-item label="报备人手机号" prop="reporterPhoneNumber">
        <el-input v-model="ruleForm.reporterPhoneNumber" />
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input v-model="ruleForm.note" type="textarea" />
      </el-form-item>
      <el-form-item label="是否本硕意向" prop="academicIntention">
        <el-select
          v-model="ruleForm.academicIntention"
          placeholder="请选择意向"
        >
          <el-option label="是" value="yes" />
          <el-option label="否" value="no" />
        </el-select>
      </el-form-item>
      <el-form-item label="班主任联系方式" prop="teacherPhoneNumber">
        <el-input v-model="ruleForm.teacherPhoneNumber" />
      </el-form-item>
      <el-form-item label="学生类型" prop="studentType">
        <el-select v-model="ruleForm.studentType" placeholder="请选择学生类型">
          <el-option label="艺术类" value="art" />
          <el-option label="普通类" value="common" />
        </el-select>
      </el-form-item>
      <el-form-item label="意向填报院校" prop="schoolIntention">
        <el-input v-model="ruleForm.schoolIntention" />
      </el-form-item>
      <el-form-item label="意向填报专业" prop="majorIntention">
        <el-input v-model="ruleForm.majorIntention" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { postStudent } from "@/api/students";

interface RuleForm {
  name: string;
  sex: string;
  region: string;
  yearOfCollegeEntrance: string;
  middleSchool: string;
  phoneNumber: string;
  reporter: string;
  department: string;
  reporterPhoneNumber: string;
  note: string;
  academicIntention: string;
  teacherPhoneNumber: string;
  studentType: string;
  schoolIntention: string;
  majorIntention: string;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "",
  sex: "",
  region: "",
  yearOfCollegeEntrance: "",
  middleSchool: "",
  phoneNumber: "",
  reporter: "",
  department: "",
  reporterPhoneNumber: "",
  note: "",
  academicIntention: "",
  teacherPhoneNumber: "",
  studentType: "",
  schoolIntention: "",
  majorIntention: ""
});

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "请输入考生姓名", trigger: "blur" },
    { min: 2, max: 20, message: "姓名长度在2到20之间", trigger: "blur" }
  ],
  sex: [
    {
      required: true,
      message: "请填写性别",
      trigger: "blur"
    }
  ],
  region: [
    {
      required: true,
      message: "请填写生源区域",
      trigger: "change"
    }
  ],
  yearOfCollegeEntrance: [
    {
      required: true,
      message: "请选择高考年份",
      trigger: "blur"
    }
  ],
  middleSchool: [
    {
      required: true,
      message: "请填写所在中学名称",
      trigger: "blur"
    }
  ],
  phoneNumber: [
    {
      required: true,
      message: "请填写手机号码",
      trigger: "blur"
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur"
    }
  ],
  reporter: [
    {
      required: true,
      message: "请填写报备人",
      trigger: "blur"
    },
    { min: 2, max: 20, message: "姓名长度在2到20之间", trigger: "blur" }
  ],
  department: [
    {
      required: true,
      message: "请填写报备人所在部分",
      trigger: "blur"
    }
  ],
  reporterPhoneNumber: [
    {
      required: true,
      message: "请填写报备人手机号码",
      trigger: "blur"
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur"
    }
  ],
  studentType: [
    {
      required: true,
      message: "请填写学生类型",
      trigger: "blur"
    }
  ]
});

const getYearBeforeNow = (before: number) => {
  const now = new Date();
  const year = now.getFullYear() - before;
  return "" + year;
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (ruleForm.phoneNumber === ruleForm.reporterPhoneNumber) {
      ElMessage({
        message: "考生手机号码和报备人手机号码一致",
        type: "error"
      });
      return;
    }
    // fields在valid为true的时候是undefined
    if (valid) {
      // 将ruleForm中的数据
      postStudent(ruleForm)
        .then(response => {
          if (response["code"] == "0") {
            ElMessage({
              message: response["message"],
              type: "success"
            });
          } else {
            ElMessage({
              message: response["message"],
              type: "error"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
